<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />

</head>
<body>
<include file="public@nav" />

<div class="center sg_Wrapper">
    <div class="fl leftBox" id="sg_leftBox">
        <!--<div class="sg_list_wra">
            <img class="star_img" src="__TMPL__public/assets/img/user_img.png" alt="">
            <h4 class="star_name">胡歌</h4>
            <p class="follow_num">1323人关注</p>
            <a class="follow_btn" href="javascript:void(0)">
                <i class="ic_follow"></i>关注
            </a>
        </div>
        <a class="star_group_more" href="javascript:void(0)">加载更多</a>-->
    </div>
    <div class="fr rightBox">
        <div class="liveTitle clearfix">
            <h4 class="fl">我关注的</h4>
            <span class="follow_num fr"></span>
            <!--  <b class="page_len">1/6</b>
            <b class="page_next fr"></b>
            <b class="page_prev fr"></b>-->
        </div>
        <ul class="livingWrapper" id="follow_wra">
           <!-- <li>
                <a href="#">
                    <img class="fl" src="__TMPL__public/assets/img/user_img.png" alt=""/>
                    <h4 class="star_name fl">高圆圆</h4>
                    <span  class="fr live_but">直播中</span>
                </a>
            </li>-->
            <a href="{:url('Personal/focus')}" class="live_all_but">查看全部<span></span></a>
        </ul>
        <div class="down_load_code">
            <p>下载livestar手机app</p>
            <div>
                <img class="fl" src="__TMPL__public/assets/img/code2.jpg" alt="">
                <span class="fr" style="margin-bottom: 4px;">Ios</span>
                <span class="fr">Android</span>
            </div>
        </div>
    </div>
</div>


<include file="public@footer" />
<include file="public@scripts" />
<script>
    headerMove(3);
    $(function(){
        var get_mySubscribe = function(){
            var mySubscribe_param = {
                url:'Users/mySubscribe',
                data:{
                    page:1
                }
            };
            $.JsonRpc(mySubscribe_param,function(data){
                var mySubscribe_data = data.data.list;
                var tpl = "";
                var le = mySubscribe_data.length;

                if(le<8){
                    $(".liveTitle .follow_num").html('('+le+"人"+')');
                }else {
                    $(".liveTitle .follow_num").html("8人");
                }
                $.each(mySubscribe_data,function(i){
                    if(i>7){
                        return;
                    }
                    var live_class,live_txt;
                    (mySubscribe_data[i].live==1)?(live_class="",live_txt="直播中"):(live_class="star_page",live_txt="");
                    tpl +=
                            '<li>'+
                            '<a href="../page/index.html?u_sid='+mySubscribe_data[i].s_udid+'">'+
                            '<img class="fl" src="'+mySubscribe_data[i].u_avatar+'" alt="">'+
                            '<h4 class="star_name fl">'+mySubscribe_data[i].s_name+'</h4>'+
                            '<span class="fr live_but '+live_class+'">'+live_txt+'</span>'+
                            '</a>'+
                            '</li>';
                });
                $(tpl).prependTo("#follow_wra");
            })
        };

        layui.use('flow', function(){
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '.leftBox' //指定列表容器
                ,isAuto:false
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    var star_list_param = {
                        url:'Homes/starList',
                        data:{
                            page:1
                        }
                    };
                    $.JsonRpc(star_list_param,function(data){
                        var star_list_data = data.data.list;
                        layui.each(star_list_data, function(index, item){
                            var listBoxClass = "";
                            if((index+1)%4==0){
                                listBoxClass = "tripleBox"
                            }
                            var tpl =
                                    '<div class="sg_list_wra '+listBoxClass+'">'+
                                    '<a href="../Page/index.html?u_sid='+star_list_data[index].s_udid+'&u_name='+star_list_data[index].s_name+'"><img class="star_img" src="'+star_list_data[index].u_avatar+'" alt=""></a>'+
                                    '<h4 class="star_name">'+star_list_data[index].s_name+'</h4>'+
                                    '<p class="follow_num">'+star_list_data[index].s_booked+'人关注</p>'+
                                    iService.focus_status_btn(star_list_data[index].booked,star_list_data[index].s_udid)+

                                        /*  '<a class="follow_btn" href="javascript:void(0)">'+
                                         '<i class="ic_follow"></i>关注'+
                                         '</a>'+*/
                                    '</div>';
                            lis.push(tpl);
                        });
                        next(lis.join(''), page < Math.ceil(data.data.num/20));
                        $(".sg_list_wra").on("click",".focus_btn",function(){
                            iService.focus_Fun(this);
                        });

                        $(".sg_list_wra").on("mouseover mouseout",".btn_cancel",function(event){
                            if(event.type == "mouseover"){
                                $(this).html("取消关注");
                            }else if(event.type == "mouseout"){
                                $(this).html("已关注");
                            }
                        });
                        get_mySubscribe();
                    });
                }
            });
        });
    })
</script>
</body>
</html>